<template>
  <div id="payScheduleInfoEdit">
    <div class="title"></div>
    <div class="content">
      <div class="edit_content" v-if="schedulePeriod">
        <div class="title">Run Payroll : {{schedulePeriod.scheduleName}}<span v-touch-ripple class="close_icon" @click="$router.back()">X</span></div>
        <div class="content">
          <el-row class="bank_pay_info">
            <el-col :span="3">
              <label>Bank Account</label>
              <el-select v-model="bankAccount">
                <!--<el-option label="none" value="none"></el-option>
                <el-option label="Male" value="Male">Male</el-option>
                <el-option label="Female" value="Female"></el-option>-->
              </el-select>
            </el-col>
            <el-col :span="4">
              <div style="margin:30px 0 0 12px;color:#fff">Balance:0</div>
            </el-col>
            <el-col :span="5" :offset="1">
              <label>Pay Period</label>
              <el-select v-model="periodSelect" size="small">
                <el-option v-for="(item,key) in schedulePeriod.periodList" :key="key"  :label="item.periodStart +' to ' + item.periodEnd" :value="key"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4" :offset="1">
              <label>Pay Date</label>
              <el-input size="small" v-model="selectDate.payDate"></el-input>
            </el-col>
            <el-col :span="2" :offset="2">
              <label>Total Pay</label>
              <div><!--$2250-->{{totalCost?totalCost:""}}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" :offset="22" style="text-align: right;padding-right: 20px"><span v-touch-ripple class="iconfont setting_icon popover_panel" :class={active:columnSelectShow}   @click="columnSelectShow = !columnSelectShow">&#xe63f;</span>
              <div class="column_list_select popover_panel" v-if="columnSelectShow">
                <el-checkbox v-model="selectAll" class="select_all" style="width:80%" label="select All"></el-checkbox>
                <el-checkbox-group v-model="columnsChecked" class="column_list_select_group" @change="checkedChange">
                  <el-checkbox style="width:100%"  v-for="item in schedulePersonTableColumn" :label="item.name" :key="key"  :disabled="item.isDisabled" >{{item.title}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>
          <div class="schedule_person_table" v-if="schedulePersonListModel" style="position: relative">

            <el-table v-if="" ref="schedulePerson"
                      :data="schedulePersonList"
                      border
                      :height="400"
                      emptyText="no data"
                      @selection-change=""
                      @cell-click="tableCellClick"
                      @sort-change=""
                      @row-dblclick=""
                      @selection-change = "tableSelectChange">
              <!--多选列-->
              <el-table-column type="selection" width="60"></el-table-column>
              <!--序列号-->
              <el-table-column type="index" label="No." width="60"></el-table-column>
              <template v-for="(item,key) in schedulePersonTableColumn"  v-if="columnsChecked.indexOf(item.name)>-1">
                <el-table-column  :key="item.name" :show-overflow-tooltip = 'true' :prop="item.name" :label="item.title" height="auto" :min-width="item.width?item.width:120" :sortable = "item.isSortable ? 'custom':false" inline-template>

                  <div class="edit_cell">

                    <template v-if="row[item.editName] == 1" >
                      <el-input type="number" v-model="schedulePersonListModel['person_'+row.uuid][item.name]" size="small" :min="0" :controls="false" @blur="tableCellBlur($event,row.uuid,item.name)"></el-input>
                    </template>
                    <!-- <template v-else>
                       <span  v-if="schedulePersonListModel['person_'+row.personId]">
                         {{schedulePersonListModel['person_'+row.personId][item.name]}}
                       </span>
                     </template>-->
                    <span v-if="item.name == 'grossyTotal'">
                  <span v-if="calculatePersonPay['person_'+row.uuid]">
                    {{calculatePersonPay['person_'+row.uuid].unit + calculatePersonPay['person_'+row.uuid].grossyTotal}}
                  </span>
                  <span v-touch-ripple v-if="item.name == 'grossyTotal' " class="iconfont edit_icon" @click="goToDetail(row.uuid)">&#xe607;</span>
                </span>
                    <span v-touch-ripple v-if="item.name == 'personName' ">{{row[item.name]}}</span>
                  </div>
                </el-table-column>
              </template>
            </el-table>
            <div class="btn_group">
              <el-button @click="$router.back()">Back</el-button>
              <el-button type="primary" @click="continuePage">Continue</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import dFilterColumn from '../../components/common/FilterColumn.vue';

  export default {
    components:{
      dFilterColumn
    },
    data:function(){
      return{
        bankAccount:null,
        periodSelect:null,
        columnSelectShow:false,
        selectAll:false, //选中所有
        selectDate:{
          periodStart:null,
          periodEnd:null,
          payDate:null,
          tableSelectRows:null,
        },
        schedulePersonTableColumn:[
          {title:'NAME',name:'personName',width:80,isDisabled:true},
          {title:'REGULAR PAY HRS',name:'regularH',editName:'isRegularPay',width:100,isDisabled:true},
          {title:'OT HRS',name:'overTimeH',editName:'isOverTime',width:100,isDisabled:true},

          {title:'Double HRS',name:'doubleOverTimeH',editName:'isDoubleOverTime',width:100},
          {title:'SICK HRS',name:'sickH',editName:'isSickPay',width:100},
          {title:'VACATION HRS',name:'vocationH',editName:'isVacationPay',width:100},
          {title:'HOLIDAY  HRS',name:'holidayH',editName:'isHolidayPay',width:100},
          {title:'BONUS',name:'bonusAmount',editName:'isBonusPay',width:100},
          {title:'COMMISSION',name:'commisionAmount',editName:'isMyCommission',width:100},

          {title:'MEMO',name:'demo',with:100,isDisabled:true},
          {title:'TOTAL PAY',name:'grossyTotal',width:100,isDisabled:true},
        ],
        columnsChecked:['overTimeH','personName','regularH','doubleOverTimeH','sickH','demo','grossyTotal'],
        calculateModel:{
          "personId": "",
          "regularH": "",//单位":小时
          "overTimeH": "",//单位":小时
          "doubleOverTimeH": "",//单位":小时
          "sickH": "",//单位":小时
          "vocationH": "",//单位":小时
          "holidayH": "",//单位":小时
          "bonusAmount": "",//单位":$
          "commisionAmount": "", //单位":$
          "grossyTotal": "2344",
          "unit": ""
        }
      }
    },
    computed:{
      schedulePeriod(){
        var data = this.$store.getters.schedulePeriod;
        if(data&&data.periodList){
          for(var i=0;i<data.periodList.length;i++){
            if(data.periodList[i].isSelect == 1){
              this.periodSelect = i;
              break;
            }
          }
          return this.$store.getters.schedulePeriod;
        }
      },
      schedulePersonList(){
        return this.$store.getters.schedulePersonList;
      },
      schedulePersonListModel(){
       return this.$store.getters.schedulePersonListModel;
      },
      calculatePersonPay(){
        return this.$store.getters.calculatePersonPay;
      },
      filterColumns(){
        return this.schedulePersonTableColumn;
      },
      totalCost(){
        var total=0;
        var unit="";
        if(this.calculatePersonPay){
            for(var i in this.calculatePersonPay){
              total += parseFloat(this.calculatePersonPay[i].grossyTotal);
              unit = this.calculatePersonPay[i].unit;
            }
        }
        return  unit + total;
      },
    },
    watch:{
      periodSelect:function(newValue,oldValue){
        this.selectDate = this.schedulePeriod.periodList[newValue];
        this.queryPerson();
      },
      schedulePersonListModel:function(newValue,oldValue){

      }
    },
    created:function(){
      this.$store.dispatch('getPaySchedulePeriod',{"scheduleId":this.getScheduleId()});
      this.queryPerson();
      this.initEvent();
    },
    activated:function(){
    /*  this.$store.dispatch('getPaySchedulePeriod',{"scheduleId":this.getScheduleId()});
      this.queryPerson();
      this.initEvent();*/
    },
    deactivated:function () {
      this.$store.commit('setCommonStateData',{key:'calculatePersonPay',data:{}});
    },
    mounted:function(){

    },
    methods:{
      back:function(){
        this.$router.push('/payRoll/payRollCenter')
      },
      initEvent(){
        var t = this;
        $(document).on("click",function(e){
          var $el = $(e.target);
          if($el.closest(".popover_panel").length==0){
            t.columnSelectShow = false;
          }
        });
      },
      getScheduleId:function(){
        return this.$route.params.id;
      },
      queryPerson:function(){
        var t = this;
        if(t.getScheduleId()&&t.selectDate.periodStart&&t.selectDate.periodEnd){
          var param ={
            "scheduleId":t.getScheduleId(),
            "periodStart":t.selectDate.periodStart,
            "periodEnd":t.selectDate.periodEnd
          }
          this.$store.dispatch('getPaySchedulePerson',param);
        }
      },
      isCanSubmit(){
        if(Object.keys(this.calculatePersonPay).length == 0){
            return false;
        }
        var data = this.tableSelectRows;
        for(var i=0;i<data.length;i++){
          if(!this.calculatePersonPay['person_'+data[i].uuid] || !this.calculatePersonPay['person_'+data[i].uuid].grossyTotal){
              return false;
          }
        }
        return true;
      },
      checkedChange(value){
      /*  //  debugger
        this.columnsChecked = [];
        console.log(value)
        console.log( this.columnsChecked )*/
      },
      /**
       表格复选框变动 == event ==
       **/
      tableSelectChange:function(selection){
        this.tableSelectRows = selection;
      },
      tableCellClick:function(row, column, cell, event){
        //$(cell).find('.edit_input').addClass('input_show').find('input').focus();
      },
      tableCellBlur:function(e,id,name){
        //$(e.target).closest(".edit_input").removeClass('input_show');
        if(e.target.value == "") {
          e.target.value =0;
        }
        var param = this.schedulePersonListModel['person_'+id];
        param.periodStart = this.selectDate.periodStart;
        param.periodEnd = this.selectDate.periodEnd;
        param.payDate = this.selectDate.payDate;
        this.$store.dispatch("getCalculatePersonPay",param);
      },
      goToDetail(personId){
        this.$router.push('/payRoll/payRollCenter/PayScheduleInfoEdit/personPayDetail/'+this.getScheduleId()+'?personId='+personId+'&periodStart='+this.selectDate.periodStart+'&periodEnd='+this.selectDate.periodEnd+'&scheduleName='+ this.schedulePeriod.scheduleName);
      },
      continuePage(){
        if(this.tableSelectRows&&this.tableSelectRows.length){
          var personIds = this.tableSelectRows.map(function (item) {
            return item.uuid || item.personId;
          }).join();
          debugger
          if(!this.isCanSubmit()){
            this.$message.warning('please compute first!');
            return;
          }
            this.$router.push('/payRoll/payRollCenter/PayScheduleInfoEdit/previewPay/'+this.getScheduleId()+'?personIds='+personIds+'&periodStart='+this.selectDate.periodStart+'&periodEnd='+this.selectDate.periodEnd+'&scheduleName='+ this.schedulePeriod.scheduleName);
        }else{
           this.$message.warning('please select a cell!');
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  #payScheduleInfoEdit{
    >.content{
      padding: 0;
    }
  }
    .edit_content {
      min-height: 100%;
      background-color: #fff;
      z-index: 1000;
      transition: all .3s;
      overflow: hidden;
      .title {
        line-height: 40px;
        background-color: #ddd;
        padding: 0 12px;
        .close_icon {
          float: right;;
          cursor: pointer;
        }
      }
      .content {
        .bank_pay_info{
          color: #fff;
          height: 100px;
          padding: 20px;
          background-color: $activeColor;
          label{
            color: #fff;
            line-height: 30px;
          }
        }
        .schedule_person_table{
          padding: 10px 20px;
          margin-bottom: 20px;
          .edit_cell{
         /*   .edit_input:not(.input_show){
              border: 1px transparent solid;
            }*/
            .edit_icon{
              position: absolute !important;
              right: 20px;
              top:50%;
              transform: translateY(-50%);
              cursor: pointer;
              &:hover{
                color: $activeColor;
              }

            }
          }
        }
        .btn_group{
          text-align: right;
          line-height: 50px;
          margin-top: 20px;
        }
      }
    }
  .column_list_select{
    position: absolute;
    right: 12px;
    top: 26px;
    background-color: rgba(255, 255, 255, 0.88);
    z-index: 100;
    box-shadow: -2px 1px 30px 0px rgba(0, 0, 0, 0.3);
    padding: 12px 0;
    border-radius: 4px;
    width: 200px;
    text-align: left;
    .column_list_select_group{
      max-height: 450px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 12px;
    }
    .select_all{
      border-bottom: 2px $activeColor solid;
      margin: 0 0 8px 15px;
      padding: 0 12px 8px 12px;
    }
    .el-checkbox:first-child{
      margin-left: 15px;
    }
    &:before{
      content: "";
      position: absolute;
      right: 8px;
      top:-16px;
      border: 10px transparent solid;
      border-bottom-color: #fff ;

    }
  }
</style>
